<template>
  <div class="box">
    <h1 class="title">父组件</h1>
    <Child/>
  </div>
</template>

<script>
/* 
结论: 
    不使用scoped: 可以修改外部/子组件(第三方组件)内部的任意标签样式 (全局)
    scoped样式: 
      不准确: 让样式只能作用于当前组件, 不能作用于其它组件(子组件/外部组件) 
      准确: 只能作用于当前组件和子组件内的根标签
    深度作用域选择器(::v-deep): 可以修改子组件(第三方组件)内部的样式
    
原因分析:
	    scoped的作用和原理
           	作用: scoped样式只能影响当前组件和子组件的根标签
            原理: 加了scoped后产生了哪些变化
                标签: 当前组件的所有原生标签和子组件的根标签都添加了同一个且唯一的data自定义属性 data-v-e8e8dd1a
                选择器: 在选择器的最右边加上了当前data自定义属性的选择器 
                        ==> 只有可能匹配上当前组件和子组件的根标签(子组件的子标签没有这个属性)
        deep的作用和原理
            deep的作用: 让我们的样式在scoped下也可以影响子组件内部子标签的样式
            使用:
            	原生css: >>>
            	css预编译器: /deep/ (vue-cli3之前) 或 ::v-deep (vue-cli3及之后)
            原理:
            	data自定义属性选择器就会从最右侧转移到deep声明的位置
            		==> 对子组件的内部子标签没有当前data属性的条件限制 ==> 那就可以匹配了
            	没有使用deep
                    .box .title[data-v-6777eaa2] {
                      color: red;
                    }
                 使用了deep
                    .box[data-v-6777eaa2] .title {
                      color: red;
                    }

总结:
	1. 如何修改第三方组件内部样式
		方式1: 将修改样式定义在没有scoped的style中  ==> 注意外层要写上当前组件根标签的选择器
		方式2: 在scoped的style中使用deep语法
	2. 作用域样式(scoped)的作用和原理
	3. 深度作用域选择器(deep)的作用和原理
*/
import Child from './Child.vue'
export default {
  name: 'DeepScoped',
  components: {
    Child
  }
}
</script>


<style lang="scss" scoped>
/* 全局样式 */
  .box {
    margin: 10px;
    border: 1px solid #ccc;
    ::v-deep .title {
      color: red;
    }
  }
</style>